<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>行业选择</title>
    <link rel="stylesheet" href="../common/public.css" />
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入http-vue-loader -->
    <script src="../common/js/vueLoader.js"></script>

    <script src="../common/ui/vant-ui/ui.js"></script>
  </head>
  <body>
    <div id="app">
       <main-top></main-top>
      <div class="mainCenter">
        <div class="leftContent">
          <top title="行业选择" icon="chat-o" icon2="edit"></top>
          <div class="pd20 bgcg">
            <!-- 搜索框 -->
            <van-field
              v-model="hy"
              class="inputBorder"
              placeholder="搜索行业"
              left-icon="search"
              center
            >
              <template #button>
                <van-button class="btn">搜索</van-button>
              </template>
            </van-field>
            <!-- 热门搜索 -->
            <div class="flex flx">
              <div v-for="i in hotList">
                <div class="utag">{{ i }}</div>
              </div>
            </div>
          </div>
          <!-- 分类 -->
          <div class="flex fenlei">
            <!-- 左 -->
            <div class="flex column left">
              <div v-for="(i,index) in modeStyle" @click="clickTip1=index">
                <div
                  class="flex aic oneTip"
                  :class="clickTip1==index?'oneTipActive':''"
                >
                  <span class="leftIcon" v-if="clickTip1==index"></span>
                  <div class="f1">{{ i.title }}</div>
                </div>
              </div>
            </div>
            <!-- 右 -->
            <div class="f1">
              <div v-for="i in modeStyle[clickTip1].child" class="bg2">
                <div class="fwb">{{ i.title }}</div>
                <div class="flex fww">
                  <div v-for="j in i.child">
                    <div class="flex column aic">
                      <img :src="j.img" class="imgbox" />
                      <div class="fs12 fwb">{{ j.title }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <lan-adright></lan-adright>
      </div>
      <main-footer></main-footer>
    </div>
  </body>
</html>
<style>
  .bgcg {
    background-color: #fefefed2;
  }
  .mgr {
    margin-right: 10px;
  }
  .fsIcon {
    font-size: 23px;
    /* margin-right: 10px; */
  }
  .inputBorder {
    border: 2px solid #f86503;
    border-radius: 20px;
    margin: 10px 0;
    width: 94%;
    padding: 0 10px 0 15px;
  }
  .inputBorder input {
    border: none;
    height: 35px;
  }
  .inputBorder .btn {
    /* margin-top: 7px; */
    border-radius: 20px;
    background-color: #f86503;
    color: #fff;
    height: 33px;
    line-height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .flx {
    width: 3000;
    overflow-x: scroll;
  }
  .utag {
    white-space: nowrap;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1;
    box-shadow: rgb(0 0 0 / 20%) 0px 2px 1px -1px,
      rgba(177, 174, 174, 0.1) 0px 1px 1px 0px,
      rgba(207, 205, 205, 0) 0px 1px 3px 0px;
    border-radius: 20px;
    margin: 5px;
  }
  .fenlei {
    margin-top: 10px;
    background-color: #f8f4f4;
    border-radius: 10px;
  }
  .fenlei .left {
    height: 500px;
    overflow-y: scroll;
  }
  .fenlei .leftIcon {
    height: 18px;
    border: 2px solid #f86503;
    border-radius: 10px;
  }
  .fenlei .oneTip {
    text-align: center;
    padding: 15px 0;
    width: 100px;
    background-color: #f8f4f4;
    font-size: 0.95rem;
  }
  .fenlei .oneTipActive {
    color: #f86503;
    background-color: #fff;
    font-weight: bold;
    font-size: 1rem;
  }
  .fenlei .right {
    height: 500px;
    overflow-y: scroll;
    height: 500px;
    /* background-color: #f86503; */
  }
  .fenlei .bg2 {
    padding: 10px 15px;
    border-radius: 8px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .imgbox {
    width: 60px;
    height: 60px;
    padding: 10px;
  }
</style>
<script>
  Vue.use(httpVueLoader);
  new Vue({
    el: "#app",
    data: {
      hy: "",
      scForpr: "",
      hotList: ["家电维修", "育苗", "沙发维修", "猫咪吃吃吃吃吃", "asfasfasf"],
      modeStyle: [
        {
          title: "装修",
          child: [
            {
              title: "二级分类",
              child: [
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
              ],
            },
            {
              title: "二级分类",
              child: [
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
              ],
            },
          ],
        },
        {
          title: "厨具",
          child: [
            {
              title: "gougou",
              child: [
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
              ],
            },
            {
              title: "二级分类",
              child: [
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
              ],
            },
          ],
        },
        {
          title: "厨具",
          child: [
            {
              title: "maomao",
              child: [
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
              ],
            },
            {
              title: "二级分类",
              child: [
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
              ],
            },
          ],
        },
        {
          title: "厨具",
          child: [
            {
              title: "二级分类",
              child: [
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
              ],
            },
            {
              title: "二级分类",
              child: [
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
                { title: "三级分类", img: "../common/img/cat.jpg" },
              ],
            },
          ],
        },
      ],
      clickTip1: 0,
    },
    components: {
      top: httpVueLoader("../common/commpent/top.vue"),
      "main-top": httpVueLoader("../common/commpent/main/workTop.vue"),
      "main-footer": httpVueLoader("../common/commpent/main/mainFooter.vue"),
      "lan-adright": httpVueLoader("../common/commpent/lan/adRight.vue"),
    },
    methods: {},
  });
</script>
